<template>
  <div>
    <!-- 今日推荐 -->
    <div class="today" style="">
      <div class="today_logo" style="">
        <div class="today_logo_first" style="">
          <div>
            <img src="@/static/home/clock.png" alt="时钟图标" />
          </div>
          <h2 class="today_logo_first_h2" style="">今日推荐</h2>
        </div>
      </div>
      <!-- 优质好货 -->
      <div v-for="item,index in imgList" :key="index">
        <ul style="display: flex" >
          <li
            style="
              background-color: #ebebeb;
              width: 298px;
              height: 165px;
              border-right: 1px solid #dedfdf;
            "
          >

           <img :src="item" alt="">

          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgList: [
        require('@/static/home/today01.png'),
        require('@/static/home/today02.png'),
        require('@/static/home/today03.png')
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.today {
  display: flex;
  width: 1100px;
  /* display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 50px;
  padding-top: 20px;  */
}
.today_logo {
  background-color: #5c5251;
  width: 200px;
  height: 165px;
  text-align: center;
  display: table;
}
.today_logo_first {
  display: table-cell;
  vertical-align: middle;
}
.today_logo_first_h2 {
  color: white;
  font-weight: bold;
  word-break: break-all;
  margin: 0;
}
</style>
